<template>
    <input type="text" v-model="name">
    {{name}}
    {{person}}
</template>

<script>
    import {reactive, toRef, toRefs, readOnly, shallowReadonly} from 'vue'
    export default {
        name : "Demo",
        setup(){
            // 用浅层次的响应式，意思是只绑定第一层。
            const person = reactive({
                name:'zhangsan',
                age:18,
                job:{
                    name:"engineer",
                    skill:"vue",
                }
            })
            // 把person变成只读模式
            person = readOnly(person)
            // 把person变成浅层只读模式(第一层只读)
            person = shallowReadonly(person)
            return {
                ...toRefs(person),
                person,
            }
        },
    }
</script>

<style scoped>

</style>